<%-- 
    Document   : chitiet
    Created on : Dec 1, 2011, 11:00:16 AM
    Author     : BlueZky
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<link rel="stylesheet" type="text/css" href="styles/userstyles.css">
<script type="text/javascript" src="js/whizzywig63.js" ></script>
<!DOCTYPE html>

<script type="text/javascript">
    $(document).ready(function(){
        $('#display-chitiet').click(function(){
            $('#chitiet').toggle();
        });
        whizzywig();
    });
</script>
<div class="content">
    <!-- Product section-->
    <div class="partion">
        <c:choose>
            <c:when test="${sanPham eq null}">
                <div style="color:red; font-size: 25px; font-family: sans-serif;margin: 40px;">Không tìm thấy sản phẩm yêu cầu</div>
            </c:when>
            <c:otherwise>
                <div class="box">
                    <div class="utitle">Chi tiết sản phẩm</div>
                    <div class="detail-product-box">

                        <img src="${sanPham.hinhanh}"  style="max-height:250px; max-width: 220px;"/>
                        <div class="des">
                            <form method="post" action="giohang.htm?a=a&pid=${sanPham.masp}">
                                <b>Số lượng</b> <input type="text" name="soLuong" value ="1" style="width:30px;"/>
                                <div class="btn-buy"><input type="image" src="images/add.png" width ="30px" align="middle"/> Mua </div>
                            </form>
                        </div>

                        <div class ="small-picture-box">
                            <img src="${sanPham.hinhanh}"  alt="${sanPham.tensp}"/>
                            <img src="${sanPham.hinhanh}"  alt="${sanPham.tensp}"/>
                            <img src="${sanPham.hinhanh}"  alt="${sanPham.tensp}"/>
                        </div>
                    </div>
                    <div class="detail-product-box" style="border:none; width: 420px;" cell-spacing="0px">
                        <table  style="width: 100%;" cellspacing ="20px" >
                            <tr style="border-bottom: 1px #ccc solid;" >
                                <td class="detail-left">Tên sản phẩm</td>
                                <td class="detail-right"><span style="font-size: 20px">${sanPham.tensp}</span></td>
                            </tr>
                            <tr style="border-bottom: 1px #ccc solid;" >
                                <td class="detail-left" >Giá bán</td>
                                <td class="detail-right" style="color:red; font-weight: bold;">${sanPham.gia} $</td>
                            </tr>
                            <tr style="border-bottom: 1px #ccc solid;" >
                                <td class="detail-left">Loại sản phẩm</td>
                                <td class="detail-right">${sanPham.loaisp.ten}</td>
                            </tr>
                            <tr style="border-bottom: 1px #ccc solid;" >
                                <td class="detail-left">Tình trạng</td>
                                <td class="detail-right">
                                    <c:if test="${sanPham.soluongton gt 0}">
                                        <b style="color: green;">Còn hàng</b>
                                    </c:if>
                                    <c:if test="${sanPham.soluongton eq 0}">
                                        <b style="color: red;">Hết hàng</b>
                                    </c:if>
                                </td>
                            </tr>
                            <tr style="border-bottom: 1px #ccc solid;" >
                                <td class="detail-left">Mô tả</td>
                                <td class="detail-right">${sanPham.mota}</td>
                            </tr>
                            <tr style="border-bottom: 1px #ccc solid;" >
                                <td class="detail-left">Thông số kỹ thuật</td>
                                <td class="detail-right"><a id="display-chitiet" href="#thongsokythuat" style="color: #00CED1;">Xem chi tiết</a></td>
                            </tr>

                        </table>

                    </div>
                </div>

                <!--  chi tiet thong so ky thuat cua san pham-->
                <div id="chitiet" style="display: none;">
                    <div class="horizontal-line" style="border:none; margin-bottom: 20px;"></div>
                    <div class="utitle" id="thongsokythuat">Thông số kỹ thuật</div> 
                </div>

                <!-- hien thi cac binh luan san pham-->
                <c:if test="${binhluan ne null}">
                    <div style="clear:both"></div>
                    <c:forEach items="${binhluan}" var="item" varStatus="status">
                        
                        <div class="comment-box">
                            <div class="comment-header">
                                <div class="comment-userinfo">
                                    
                                </div>
                                <div class="comment-info"><fmt:formatDate pattern="dd/MM/yyyy" value="${item.thoigian}"/></div>

                            </div>
                            <div style="clear:both"></div>
                            <div class="comment-content">${item.noidung}</div>
                        </div>
                    </c:forEach>
                </c:if>
                <c:if test="${nguoiDung ne null}">
                    <div style="clear:both"></div>
                    <div class="comment-box">
                        <form method="post" action="chitiet.htm?PID=${sanPham.masp}&a=post">
                            <div class="comment-header">
                                <div class="comment-userinfo">
                                    ${nguoiDung.tendangnhap}
                                </div>
                                <div class="comment-info"></div>
                            </div>
                            <div style="clear:both"></div>
                            <textarea name="comment"  style="width: 100%; min-height: 100px;"></textarea>
                            <input type="submit" id="post" class="comment-button" value="Gửi bình luận"/>  
                        </form>
                    </div>
                </c:if>

                <div style="clear:both"></div>




                <c:if test="${danhSach ne null}">
                    <div class="horizontal-line" style="margin:20px auto 20px auto;"></div>
                    <div class="box">
                        <c:forEach items="${danhSach}" var="item" varStatus="status" end="3">
                            <div class="product-box">
                                <div class="decorate">
                                    <a href="chitiet.htm?PID=${item.masp}">
                                        <div class="balance" style="width: 130px">
                                            <img src="${item.hinhanh}" alt="${item.tensp}" />
                                        </div>
                                        <div class="des">
                                            <strong>${item.tensp}</strong>
                                            <br/>
                                            <span class="price">From $${item.gia}</span>
                                        </div>
                                    </a>
                                </div>
                            </div> 
                        </c:forEach>
                    </div>
                    <div class="horizontal-line" style="border:none; margin-bottom: 20px;"></div>
                </c:if>
            </c:otherwise>
        </c:choose>
    </div>
    <!-- End product section-->

</div>